<template>
    <div class="list-img">
        <el-scrollbar>
            <div class="waterfall" ref="imgbox">
                <img :src="item.url" v-for="item in imglist" :style="{ width: `${imgWidth}px` }" :title="item.name"
                    :key="item.owner.id" />
            </div>
            <div class="loading" v-infinite-scroll="load" v-if="isMove" :infinite-scroll-immediate="false">
                <Loading />
            </div>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
import axios from "axios"
import { ref, onMounted, nextTick } from "vue"
import Loading from "@/components/Loading.vue"
const isMove = ref(true)
const imgbox = ref(null)
const page = ref({
    pageSize: 30,
    pageNum: 1
})
const imglist = ref([])
const imgWidth = ref(220)
onMounted(async () => {
    await getImg()
    nextTick(() => {
        setTimeout(() => {
            layout()
        }, 0)
        setTimeout(() => {
            layout()
        }, 5000)
    })
    window.addEventListener("resize", () => {
        layout()
    })
})
const getImg = async () => {
    const res = await axios.get("http://oss.quarkzhong.top/object/list", {
        params: {
            bucketName: "pubuliu1",
            pageSize: page.value.pageSize,
            pageNum: page.value.pageNum
        }
    })
    if (res.data.res.length === 0) {
        isMove.value = false
        return
    }
    imglist.value.push(...res.data.res)
    setTimeout(() => {
        layout()
    }, 100)
}
const getinfo = () => {
    let waterfall = document.querySelector(".waterfall")
    let waterfallWidth = waterfall.offsetWidth
    let column = Math.floor(waterfallWidth / imgWidth.value)
    let gapCount = column - 1
    let freeSpace = waterfallWidth - column * imgWidth.value
    let gap = freeSpace / gapCount
    return { column, gap }
}
const getMinTop = nextTop => {
    let min = nextTop[0],
        index = 0
    for (let i = 1; i < nextTop.length; i++) {
        if (nextTop[i] < min) {
            min = nextTop[i]
            index = i
        }
    }
    return { min, index }
}
const getMaxTop = nextTop => {
    let max = nextTop[0],
        index = 0
    for (let i = 1; i < nextTop.length; i++) {
        if (nextTop[i] > max) {
            max = nextTop[i]
            index = i
        }
    }
    return { max, index }
}

const layout = () => {
    let waterfall = document.querySelector(".waterfall")

    let info = getinfo()
    let nextTop = new Array(info.column).fill(0)

    waterfall = document.querySelector(".waterfall")
    for (let i = 0; i < waterfall.children.length; i++) {
        const img = document.querySelector(`.waterfall img:nth-child(${i + 1})`)
        let minTop = getMinTop(nextTop)
        img.style.left = `${minTop.index * (imgWidth.value + info.gap)}px`
        img.style.top = `${minTop.min + info.gap / 2}px`
        //更新
        nextTop[minTop.index] += img.offsetHeight + info.gap / 2
        let maxTop = getMaxTop(nextTop)
        waterfall.style.height = maxTop.max + "px"
    }
}

const load = async () => {
    page.value.pageNum++
    await getImg()
}
</script>

<style lang="less" scoped>
.list-img {
    height: calc(100vh - 60px);
    overflow: hidden;

    .waterfall {
        position: relative;
        width: 100%;
        margin: 0 auto 120px auto;

        img {
            position: absolute;
            /* width: 220px; */
            border-radius: 10px;
            transition: all 0.2s;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
    }

    .loading {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 200px;

        .el-image {
            width: 50px;
            height: 50px;
        }
    }
}
</style>